<template>
	<view class="funcs-item" @click="scanCode()">
		<view class="funcs-item-img">
			<image src="../../static/img/home-img/sys.png" mode="aspectFit"></image>
		</view>
	</view>
</template>
	
<script>
import CheckList from "@/components/checkList/checkList.vue"
	export default {
		name: "home_funcs",
		data() {
			return {
				checkList: [],
				userInfo: "",
				token: "",
				images: []
			}
		},
		onPullDownRefresh() {
			this.getUserInfo();
			this.getCheckList();
		},
		methods: {	
			to(router) {
				uni.navigateTo({
					url: router
				});
			},
			scanCode() {
				var t = this
				console.log(this);
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						console.log(res);
						if (res.result == '11025') {
							// 签到
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {

									console.log(res); // 在这里会打印出你当前位置的经纬度 你可以根据这里打印出来的经纬度去调整
									console.log(this);
									let right_latitude = 25; // 根据上面的结果 你可以设置一个误差范围在精度范围内的
									let right_longitude = 110; // 同上
									if (Math.abs(res.latitude - right_latitude) <= 6 &&
										Math.abs(res.longitude - right_longitude) <= 10) {
										// 在合理误差范围之内
										// 发起你的请求
										// 调用签退请求
										uni.request({
											// t.userInfo.id这个参数你在这个页面没获取 所以报错
											url: "http://localhost:4567/check_json/check.opera/" + t.userInfo.id,
											header: {
												"token": t.token
											},
											method: "POST",
											success(res) {
												if (res.data.code) {
													uni.showModal({
														title: '提示',
														content: res.data.msg,
														success: function(res) {}
													});
													return;
												}
												uni.showModal({
													title: '提示',
													content: "签到成功",
													success: function(res) {}
												});
											},
											fail() {
												uni.showModal({
													title: '提示',
													content: '签到失败',
													success: function(res) {}
												});
											}
										})
									} else {
										uni.showToast({
											title: '您不在签到范围内',
											icon: 'none',
											duration: 1500
										})
									}
								}
							})
						}  else {
							uni.showToast({
								title: '二维码不合法',
								icon: 'none',
								duration: 1500
							})
						}
					}
				})
			},	
			getCheckList() {
				var _self = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						uni.request({
							url: "http://localhost:4567/check_json/dayCheck.json",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								_self.checkList = res.data
								_self.getAvatar()
							},
							fail: (res) => {}
						});
					},
					fail: function(res) {}
				});
			},
			getUserInfo() {
				var _self = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						_self.token = storage.data.tokenName;
						uni.request({
							url: "http://localhost:4567/user_json/getUser.json",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								if (res.statusCode != 200) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								} else {
									_self.userInfo = res.data
								}
							},
							fail: (res) => {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						});
					},
					fail: function(res) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				});
			},
			getAvatar() {
				var t = this;
				this.images = []
				for (var i = 0; i < this.checkList.length; i++) {
					uni.request({
						url: "http://localhost:4567/user_json/userAvatar.json/" + t.checkList[i].userId,
						method: "POST",
						header: {
							"token": t.token
						},
						success(res) {
							t.images.push(res.data);
						}
					})
				}
			},
		},
		onLoad() {
			this.getUserInfo();
			this.getCheckList();
		}
	}
</script>

<style lang="less" scoped>
	.home-funcs {
		font-size: 20rpx;
		padding: 15rpx 10rpx 15rpx 10rpx;
		margin: 0 auto;

		.funcs-item:nth-child(1) {
			float: left;
		}

		.funcs-item {
			text-align: center;
			overflow: hidden;
			width: 20%;
			display: inline-block;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>
